<template>
  <div>
    <div class="moni——bun">
      <el-select v-model="value" placeholder="请选择" style=" margin-left: 20px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <div class="block">
        <el-date-picker style=" margin-left: 20px" v-model="value1" type="daterange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>

        <el-button type="primary" style=" background-color: #007761; border-color: #fff; margin-left: 20px"
          icon="el-icon-search">查询</el-button>
        <el-button type="primary"
          style="border-color: #007761; background-color: #fff; color: black; margin-left: 20px  "
          icon="el-icon-refresh">重置</el-button>
      </div>
    </div>
    <div style="margin-top: 30px;  ">

      <el-button @click="dialogVisible = true"
        style=" background-color: #007761; border-color: #fff; margin-left: 20px; color: #fff;   margin: 15px  0;  float: right; margin-right: 10px;">
        新增
      </el-button>  
      <el-dialog title="新增" :visible.sync="dialogVisible" width="50%" height="100px" :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px" style="  display: flex;"  >
          <div>
          <el-form-item label="策略名称">
            <el-input v-model="form" style=" width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-input v-model="form" style=" width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="设备编号">
            <el-input v-model="form" style=" width: 200px;"></el-input>
          </el-form-item>
         </div>
          <div>
          <el-form-item label="监控点">
            <el-select v-model="form" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备位置">
            <el-select v-model="form" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>   
          <el-form-item label="触发动作">
            <el-select v-model="form" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              style="background-color: #007761; border-color: #fff; ">保存</el-button>
          </span>
        </el-form>

      </el-dialog>
      <el-table :data="tableData">
        <el-table-column prop="linkId" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="linkName" label="策略编号" width="100">
        </el-table-column>
        <el-table-column prop="linktag" label="策略名称">
        </el-table-column>
        <el-table-column prop="linkduration" label="检控点编号" width="100">
        </el-table-column>
        <el-table-column prop="linkTime" label="监控点名称" width="100">
        </el-table-column>
        <el-table-column prop="linkstatus" label="设备类型" width="100">
        </el-table-column>
        <el-table-column prop="linkImg" label="楼栋" width="100">
        </el-table-column>
        <el-table-column prop="linkagerPad" label="楼层" width="100">
        </el-table-column>
        <el-table-column prop="linkagerKl" label="触发动作" width="100">
        </el-table-column>
        <el-table-column prop="linkagerSen" label="状态" width="100">
        </el-table-column>
        <el-table-column prop="name" label="操作" width="100">
        </el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" :total="50" style="float:right">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import API from '../../api'
export default {
  created() {
    this.setDlinext(this.filterparams)
  },
  data() {
    return {
      tableData: [],
      total: 0,
      filterparams: {
        page: 1,
        size: 3
      },
      dialogVisible: false,
      dialogVisible: false,

      options: [{
        value: '选项1',
        label: '通知'
      }, {
        value: '选项2',
        label: '公告'
      },],
      value: '',
      pickerOptions: {

      },
      value1: '',
      value2: ''
    };
  },
  methods: {
    async setDlinext() {
      const data = await API.setDlinext(this.filterparams)
      console.log(data);
      this.tableData = data.data
      this.total = data.total
    },
  }

};

</script>
<style>
.moni——bun {
  display: flex;
  height: 70px;
  line-height: 70px;
  border-radius: 10px;
  background-color: #fff;
}
</style>